<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- css -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
          crossorigin="anonymous">
    <!-- /css -->
    <title>LSC's Blog</title>
</head>
<body>
<!-- nav bar-->
<nav class="navbar navbar-expand-lg  navbar-light bg-light fixed-top">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">LSC's Blog</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
                aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <!-- 主页 -->
                <li class="nav-item">
                    <a class="nav-link active" aria-current="page" th:href="@{/}">Home</a>
                </li>
                <!-- /主页 -->

                <!-- 归档页 -->
                <li class="nav-item">
                    <a class="nav-link" href="#">Archive</a>
                </li>
                <!-- /归档页 -->

                <!-- 下拉框 -->
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
                       data-bs-toggle="dropdown" aria-expanded="false">
                        Dropdown
                    </a>
                    <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <li><a class="dropdown-item" href="#">Action</a></li>
                        <li><a class="dropdown-item" href="#">Another action</a></li>
                        <li>
                            <hr class="dropdown-divider">
                        </li>
                        <li><a class="dropdown-item" href="#">Something else here</a></li>
                    </ul>
                </li>
                <!-- /下拉框 -->

                <!-- 灰色标签 -->
                <li class="nav-item">
                    <a class="nav-link disabled">Disabled</a>
                </li>
                <!-- /灰色标签 -->
            </ul>
            <!-- 搜索框 -->
            <form class="d-flex">
                <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
                <button class="btn btn-outline-success" type="submit">Search</button>
            </form>
            <!-- /搜索框 -->
        </div>
    </div>
</nav>
<!-- /nav bar-->

<!-- body -->
<div class="container">
    <br><br><br>
    <img src="https://gitee.com/Lu_Shengcan/my-picture-bed/raw/master/blogPictures/-166dcc29ccaceae3.jpg" height="600px"
         width="1100px" alt="aa"/>
    <br><br>
    <!-- 文章标题 -->
    <h1 style="text-align: center" th:text="${article.articleTitle}"></h1>
    <!-- /文章标题 -->

    <!-- 文章内容 -->
    <div id="content"></div>
    <!-- /文章内容 -->

</div>
<!-- /body -->

<!-- footer -->
<div class="container">
    <footer class="py-3 my-4">
        <ul class="nav justify-content-center border-bottom pb-3 mb-3">
            <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">Home</a></li>
            <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">Features</a></li>
            <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">Pricing</a></li>
            <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">FAQs</a></li>
            <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">About</a></li>
        </ul>
        <p class="text-center text-muted">© 2021 Company, Inc</p>
    </footer>
</div>
<!-- /footer -->

<!-- js -->
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/showdown/1.9.1/showdown.js"></script>
<script type="text/javascript" th:inline="javascript">
    let converter = new showdown.Converter();
    let text = /*[[${article.articleContent}]]*/ "这是默认值";
    document.getElementById("content").innerHTML = converter.makeHtml(text);
</script>
<!-- /js -->
</body>
</html>